import { useIntersectionObserver } from '@vueuse/core'
//定义懒加载插件

export const lazyPlugin={
    install(app){
        //懒加载指令逻辑
     //定义全局指令
// 使 v-focus 在所有组件中都可用
app.directive('img-lazy', {
    mounted(el, binding) {
      // el: 指令所绑定的元素 img，DOM操作
      // binding:binding.value 指令等于括号后面绑定的表达式的值，图片地址url
      console.log(el,binding.value);
    
      const { stop } = useIntersectionObserver(
          el,//你要监听谁是否进入视口区域就把谁传过来
          ([{ isIntersecting }]) => {//isIntersecting 判断是否进入视口区域是一个布尔值
            console.log(isIntersecting);
            if (isIntersecting) {
              // 进入视口区域，把图片地址赋值给img的src属性
              el.src = binding.value; // 进入视口区域，把图片地址赋值给img的src属性
              stop()// 停止监听
            }
          },
        ) 
    }
    })
     
    }
}